<template>
  <div class="images-group-container">
    <!-- <div
      class="images-row flex justify-between items-center"
      v-if="imagesAmount === 1">
      <div
        class="image-container single-image w-full flex items-center overflow-hidden"
        :style="{maxHeight: `${maxHeight}px`}">
        <image
          class="w-full"
          :class="images[0].imgUrl !== '' ? 'bg-hex-f6f6f6': 'pointer-events-none'"
          :src="images[0].imgUrl"
          mode="widthFix"
          :lazy-load="true"
          @click.stop="previewImage(0)" />
      </div>
    </div> -->
    <div
      class="images-row flex justify-between items-center"
      v-if="imagesAmount === 1">
      <div
        class="image-container multi-image w-full flex overflow-hidden"
        v-for="image in firstRow"
        :key="image.index">
        <image
          class="w-full"
          :class="image.url !== '' ? 'bg-hex-f6f6f6': 'pointer-events-none'"
          :src="image.url"
          mode="aspectFill"
          :lazy-load="true"
          @click.stop="previewImage(image.index)" />
      </div>
    </div>
    <div
      class="images-row flex justify-between items-center"
      v-if="imagesAmount > 1">
      <div
        class="image-container multi-image w-full flex overflow-hidden"
        v-for="image in firstRow"
        :key="image.index">
        <image
          class="w-full"
          :class="image.url !== '' ? 'bg-hex-f6f6f6': 'pointer-events-none'"
          :src="image.url"
          mode="aspectFill"
          :lazy-load="true"
          @click.stop="previewImage(image.index)" />
      </div>
    </div>
    <div
      class="images-row flex justify-between items-center"
      v-if="imagesAmount > 3">
      <div
        class="image-container multi-image w-full flex overflow-hidden"
        v-for="image in secondRow"
        :key="image.index">
        <image
          class="w-full"
          :class="image.url !== '' ? 'bg-hex-f6f6f6': 'pointer-events-none'"
          :src="image.url"
          mode="aspectFill"
          :lazy-load="true"
          @click.stop="previewImage(image.index)" />
      </div>
    </div>
    <div
      class="images-row flex justify-between items-center"
      v-if="imagesAmount > 6">
      <div
        class="image-container multi-image w-full flex overflow-hidden"
        v-for="image in thirdRow"
        :key="image.index">
        <image
          class="w-full"
          :class="image.url !== '' ? 'bg-hex-f6f6f6': 'pointer-events-none'"
          :src="image.url"
          mode="aspectFill"
          :lazy-load="true"
          @click.stop="previewImage(image.index)" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import {useSystemStore} from '@/store'
  import {EtwStoreImage} from '@/service/api/modules/store/response'

  interface ImagesGroupProps {
    images: Array<EtwStoreImage> //图片数组
  }

  const props = defineProps<ImagesGroupProps>()
  const {windowWidth} = storeToRefs(useSystemStore())

  const imagesAmount = computed((): number => props.images?.length)
  const minWidth = computed((): string => '30%')
  const maxWidth = computed((): string => '60%')
  const maxHeight = computed((): number => 0.8 * windowWidth.value)

  type ImagesRow = {
    url: string
    index: number
  }
  const imgRow: ImagesRow = {url: '', index: -1}

  const firstRow = computed((): Array<ImagesRow> => {
    const arr = props.images.slice(0, 3).map((v, k) => ({url: v.imgUrl ?? '', index: k}))
    return [imgRow, imgRow, imgRow].map((v, k) => ({...v, ...arr[k]}))
  })

  const secondRow = computed((): Array<ImagesRow> => {
    const arr = props.images.slice(3, 6).map((v, k) => ({url: v.imgUrl ?? '', index: k + 3}))
    return [imgRow, imgRow, imgRow].map((v, k) => ({...v, ...arr[k]}))
  })

  const thirdRow = computed((): Array<ImagesRow> => {
    const arr = props.images.slice(6, 9).map((v, k) => ({url: v.imgUrl ?? '', index: k + 6}))
    return [imgRow, imgRow, imgRow].map((v, k) => ({...v, ...arr[k]}))
  })

  // 预览图片
  const previewImage = (index: number): void => {
    if (index !== -1) {
      let previewImageList: Array<string> = []
      props.images.map(image => {
        if (image.imgUrl) {
          // previewImageList.push(image.imgUrl.replace('?x-oss-process=image/resize,w_800/quality,q_90', ''))
          // previewImageList.push(image.imgUrl.substr(0, image.imgUrl.indexOf('?')))
          previewImageList.push(image.imgUrl)
        }
      })
      uni.previewImage({
        current: index,
        urls: previewImageList
      })
    }
  }

  // 长按事件
  const handleLongPress = (index: number): void => {
    const imgUrl = props.images[index].imgUrl
    uni.vibrateShort({})
    return
    // uni.showActionSheet({
    //     itemList: ['查看原图', '保存到手机'],
    //     success: res => {
    //         if (res.tapIndex === 0 && !!imgUrl) {
    //             uni.previewImage({
    //                 urls: [imgUrl.replace('?x-oss-process=image/resize,w_800/quality,q_90', '')]
    //             })
    //         } else if (res.tapIndex === 1 && !!imgUrl) {
    //             uni.downloadFile({
    //                 url: imgUrl.replace('?x-oss-process=image/resize,w_800/quality,q_90', '?x-oss-process=image/resize,w_2000/quality,q_90'),
    //                 success: res => {
    //                     if (res.statusCode === 200) {
    //                         uni.saveImageToPhotosAlbum({
    //                             filePath: res.tempFilePath,
    //                             success: function () {
    //                                 uni.showToast({
    //                                     title: '保存成功',
    //                                     icon: 'none'
    //                                 })
    //                             },
    //                             fail: function () {
    //                                 uni.showToast({
    //                                     title: '保存失败',
    //                                     icon: 'none'
    //                                 })
    //                             }
    //                         })
    //                     }
    //                 }
    //             })
    //         }
    //     }
    // })
  }
</script>

<style scoped lang="scss">
  @import 'images-group';
</style>